<template>
	<div v-loading="loading">
		<el-card class="!border-none mb-4" shadow="never">
			<el-alert type="warning" title="H5端设置，请谨慎操作" :closable="false" show-icon></el-alert>
		</el-card>
		<el-form ref="formRef" :model="formData" label-width="150px">
			<el-card shadow="never" class="!border-none">
				<el-form-item label="渠道状态：" required>
					<div>
						<el-radio-group v-model="formData.status">
							<el-radio :label="1">开启</el-radio>
							<el-radio :label="0">关闭</el-radio>
						</el-radio-group>
						<div class="el-form-tips">状态关闭后，H5端将不对外提供服务。使用场景：系统升级维护等</div>
					</div>
				</el-form-item>
				<el-form-item v-if="!formData.status" label="关闭后跳转页面：" prop="close_url">
					<div class="w-80">
						<el-input v-model.trim="formData.close_url" placeholder="请输入跳转页面链接" />
						<div class="el-form-tips">如果为空，跳转系统默认空白页</div>
					</div>
				</el-form-item>
				<el-form-item label="访问链接：" prop="url">
					<div class="w-[408px]">
						<el-input v-model="formData.url" :readonly="true">
							<template #append>
								<el-button @click="copyText(formData.url)">复制链接</el-button>
							</template>
						</el-input>
					</div>
				</el-form-item>
			</el-card>
		</el-form>
		<footerSubmit>
			<el-button v-auth="'channel/setH5Config'" type="primary" @click="handleSubmit">保存</el-button>
		</footerSubmit>
	</div>
</template>

<script lang="ts" setup name="channelH5">
import { ref, reactive, onMounted } from 'vue';
import { getH5Config, setH5Config } from '/@/api/channel/h5';
import { messageSuccess } from '/@/utils/message';
import commonFunction from '/@/utils/commonFunction';

const formRef = ref(null);

const loading = ref(true);

const { copyText } = commonFunction();

// 表单数据
const formData = reactive({
	status: 1,
	url: '',
	close_url: '',
});

// 获取数据
const getData = async () => {
	const data = await getH5Config();
	for (const key in formData) {
		if (data[key] != null && data[key] != undefined) {
			formData[key] = data[key];
		}
	}
	loading.value = false;
};

// 保存提交
const handleSubmit = async () => {
	await formRef.value?.validate();
	await setH5Config(formData);
	messageSuccess('设置成功');
	getData();
};

onMounted(() => {
	getData();
});
</script>
